<template>
  <div class="sidebar-container">
    <el-menu
      :default-active="activePath"
      background-color="#2f3b4e"
      text-color="#fff"
      active-text-color="#fff"
      router
      class="sidebar-menu"
    >
      <!-- 顶部标题区域 -->
      <div class="menu-header">
        <img 
          src="https://tse2-mm.cn.bing.net/th/id/OIP-C.eBbeibCXZFkK9F6wnMHnNgHaG8?rs=1&pid=ImgDetMain" 
          alt="智慧食堂Logo" 
          class="menu-logo"
        >
        <span class="menu-title">智慧食堂</span>
      </div>

      <!-- 菜品类目折叠面板 -->
      <el-collapse v-model="activeCollapse" class="category-collapse">
        <el-collapse-item name="category">
          <template #title>
            <div class="collapse-title">
              <!-- 图标 -->
              <i class="el-icon-menu category-icon"></i>
              <!-- 标题文字 -->
              <span>菜品类目</span>
              <!-- 折叠箭头 -->
              <i class="el-icon-arrow-down category-arrow" :class="{ 'rotate': isCategoryOpen }"></i>
            </div>
          </template>
          
          <!-- 菜单项 -->
          <div class="category-items">
            <el-menu-item v-for="item in categories" :key="item.path" :index="item.path">
              {{ item.label }}
            </el-menu-item>
          </div>
        </el-collapse-item>
      </el-collapse>

      <!-- 固定功能菜单 -->
      <el-menu-item index="/shopping" class="fixed-menu-item">
        <i class="el-icon-shopping-cart-1"></i>
        <span>我的购物车</span>
      </el-menu-item>
      <el-menu-item index="/form" class="fixed-menu-item">
        <i class="el-icon-s-order"></i>
        <span>我的订单</span>
      </el-menu-item>
      <el-menu-item index="/person" class="fixed-menu-item">
        <i class="el-icon-user-solid"></i>
        <span>个人信息</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activePath = computed(() => route.path);
const activeCollapse = ref(['category']); 
const isCategoryOpen = computed(() => activeCollapse.value.includes('category'));

const categories = [
  { label: '猪肉类', path: '/pork' },
  { label: '牛肉类', path: '/beef' },
  { label: '羊肉类', path: '/mutton' },
  { label: '水产类', path: '/aquatic' },
  { label: '豆制品类', path: '/bean' },
  { label: '蔬菜类', path: '/vegetable' },
  { label: '鸡蛋类', path: '/egg' },
  { label: '主食类', path: '/food' },
];
</script>

<style scoped>
/* 侧边栏容器 - 占满父级高度 */
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 菜单主体 - 占满剩余空间 */
.sidebar-menu {
  flex: 1;
  width: 200px;
  overflow-x: hidden;
  overflow-y: auto; 
  border-right: none; 
}

/* 顶部标题区域 */
.menu-header {
  height: 60px;
  background-color: #242c3b;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.menu-title {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

/* 折叠面板样式 */
.category-collapse {
  border: none;
  margin: 0;
}

/* 折叠标题（核心修改区） */
.collapse-title {
  display: flex;
  align-items: center;
  height: 45px;
  background-color: #242c3b;
  padding: 0 20px;
  cursor: pointer;

  /* 标题文字 */
  span {
    color: white; 
    font-size: 14px;
  }

  /* 折叠图标 */
  .category-icon {
    margin-right: 10px;
    width: 18px;
    text-align: center;
    color: white; /* 图标颜色 */
  }

  /* 折叠箭头（核心修改） */
  ::v-deep .category-arrow {
    margin-left: auto;
    transition: transform 0.3s ease, color 0.3s ease;
    color: white !important; /* 强制覆盖所有层级样式 */
  }
}

.rotate {
  color: white;
  transform: rotate(180deg);
}

/* 菜单项样式 */
.category-items {
  background-color: #2f3b4e;
}

::v-deep .category-items .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding-left: 45px !important;
  transition: all 0.2s ease;
}

::v-deep .category-items .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 50px !important;
}

/* 固定菜单项样式 */
.fixed-menu-item {
  height: 45px;
  line-height: 45px;
  transition: all 0.3s ease;
}

.fixed-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

::v-deep .fixed-menu-item i {
  margin-right: 10px;
  width: 18px;
  text-align: center;
}

/* 激活状态样式 */
::v-deep .el-menu-item.is-active {
  background-color: #1b78d0 !important;
  border-left: 3px solid #ffd04b;
}

/* 清除组件默认间距 */
::v-deep .el-menu {
  border: none;
  margin: 0;
  padding: 0;
}

::v-deep .el-collapse-item__header {
  border: none;
  background-color: #242c3b !important;
}

::v-deep .el-collapse-item__content {
  padding: 0 !important;
  background-color: #2f3b4e !important;
}
</style>